How to add confirm email address field in WooCommerce checkout page?

In some situations default WooCommerce email validation is not good enough. If your clients often enter the wrong email address on the checkout page, you can try adding confirm email address field in the WooCommerce checkout page. In this article, I’ll show you how to do this with the free plugin.

The purchasing process is a very complex and fragile element for every eCommerce. Imagine all your hard work is destroyed by a trivial mistake like misspelled email address on the checkout page. In the best scenario, you will have to spend some time answering your client. In the worst one, your client will be annoyed. Even it’s not your fault you will lose time or money.

There is a simple solution for that, and it possible to achieve with our free plugin! It’s Flexible Checkout Fields, and people love it. We have received a lot of positive feedback from users. Also, over 70,000 stores worldwide use this plugin on a daily basis!

Flexible Checkout Fields allows you to:

Yes, it’s all for free!

Edit, add new or hide unnecessary fields from the checkout form. It's all about conversions and better user experience.

If you have the plugin installed and activated, you can go to WooCommerce > Checkout Fields.

In the billing section, add a new Single Line Field. Add a label and click on Add Field button.

Next, put the new field below your email address field. You can do this with simple drag and drop.

Set this field as Required.

With this setup, two email address fields will be displayed one below the other. 

If you want to display them side by side, you can do this with CSS classes. Just add a special class in the Appearance section. 

In the first field, set it as form-row-first.

In the second, form-row-last.

With this CSS classes, both fields will be displayed side by side. 

If you have your fields, now it’s time to add custom validation. We have special documentation about it, where you will find more useful validations. But for adding confirm email address field in WooCommerce checkout, we will use this code.

Just add this to your functions.php file. Next, go back to your checkout fields page, and refresh it. Now, you should be able to choose Compare with billing_email in the validation field. When you do that, save the changes.

Let’s find out how it will work on the checkout page. Two email address fields aren’t filled exactly the same.

When I try to place an order, I get an error message.

You can change the default error message, by editing this code.

wc_add_notice( sprintf( __( 'Invalid %1$s value.', 'wpdesk' )

To do that, just change 'Invalid %1$s value.'.

You can check other field in the similar way. Just edit the following code: $fcf_validation_confirm_field = new WPDesk_FCF_Validation_Confirm_Field( 'billing_email' );

Change billing_email for other fields, like billing_my_custom_field.

In this article I showed you how to add confirm email address field in the WooCommerce checkout page. This will allow you to limit your clients’ error, and secure your purchasing process. I hope it will be useful for you. Good luck!